<template>
  <div class="similar-content" v-loading="loading">
    <template v-if="config.tagId">
      <tool-item
        ref="toolItem"
        :config="config"
        :type="type"
        @setLoading="setLoading"
        @deleteData="deleteData"
        @rollback="$emit('refresh')"
      ></tool-item>
      <content-info :config="config"></content-info>
    </template>
    <div class="no-record" v-else>
      <template>
        <img src="~@/assets/img/no_records.png" /><br />
        <span>暂无内容</span>
      </template>
    </div>
  </div>
</template>

<script>
import toolItem from './content-tool-item'
import contentInfo from './content-info'
export default {
  components: {
    toolItem,
    contentInfo
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: String,
      default: 'asideMine'
    }
  },
  data() {
    return {
      loading: false,
      timeout: null
    }
  },
  watch: {
    config() {
      clearInterval(this.timeout)
      if (this.config.tagReqStatus === 1) {
        this.getData()
        this.timeout = setInterval(() => {
          this.getData()
        }, 20000)
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timeout)
  },
  methods: {
    getData() {
      this.$ajax({
        url: this.$ajax.setUrl(`der/derCustExtension/getExtensionDetail/${this.config.tagId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.tagReqStatus !== 1) {
            clearInterval(this.timeout)
            this.$emit('refresh')
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    setLoading(bool) {
      this.loading = bool
    },
    deleteData() {
      this.$emit('deleteData')
    }
  }
}
</script>

<style lang="scss">
.tag-similar {
  .similar-content {
    height: 100%;
    padding: 0 0 5px 350px;
    background-color: #fff;
    .no-record {
      padding-top: 200px;
      text-align: center;
      span {
        line-height: 30px;
      }
    }
  }
}
</style>
